<template>
	<view class="app">
		<u-form :model="form1" ref="form1" :label-width="200" input-align="right">
			<u-form-item label="收货人" prop="name">
				<u-input v-model="form1.name" placeholder="请输入收货人姓名" :clearable="false" />
			</u-form-item>
			<u-form-item label="手机号码" prop="mobile">
				<u-input placeholder="请输入收货人手机号" v-model="form1.mobile" :clearable="false" />
			</u-form-item>
			<u-form-item label="所在地区" prop="position.latitude">
				<vk-data-input-map v-model="form1.position" placeholder="请选择所在地区" />
			</u-form-item>
			<u-form-item label="详细地址" prop="position.address">
				<u-input v-model="form1.position.address" placeholder="街道、楼牌等" />
			</u-form-item>
			<u-form-item label="设为默认地址" align="right">
				<u-switch v-model="form1.is_default" active-color="var(--main)"></u-switch>
			</u-form-item>
			<view class="footer">
				<view class="main-btn" @click="submit">保存</view>
			</view>
		</u-form>
		<vk-data-loading v-model="loading" :delayTime="0"></vk-data-loading>
	</view>
</template>

<script>
var vk = uni.vk // vk依赖

export default {
	data() {
		// 页面数据变量
		return {
			title: "收货地址",
			url: {
				add: "client/address.addUpdate", // 添加时请求的云函数
				update: "client/address.addUpdate", // 修改时请求的云函数
				getInfo: "client/address.getInfo" // 修改时，查询_id对应的信息时请求的云函数
			},
			// 表单请求数据
			form1: {
				name: "",
				mobile: "",
				position: {},
				alias: "",
				is_default: false
			},
			rules: {
				name: [
					{
						required: true,
						type: "string",
						message: "请输入姓名",
						trigger: ["change", "blur"]
					}
				],
				mobile: [
					{
						required: true,
						type: "string",
						message: "请输入手机号",
						trigger: ["change", "blur"]
					},
					{
						validator: uni.vk.pubfn.validator("mobile"),
						message: "手机号格式错误",
						trigger: "blur"
					}
				],
				"position.area.code": [
					{
						required: true,
						type: "string",
						message: "请选择所在地区",
						trigger: ["change", "blur"]
					}
				],
				"position.latitude": [
					{
						required: true,
						type: "number",
						message: "请选择地图位置",
						trigger: ["change", "blur"]
					}
				],
				"position.address": [
					{
						required: true,
						type: "string",
						message: "请输入详情地址",
						trigger: ["change", "blur"]
					}
				]
			},
			scrollTop: 0,
			loading: false, // 表单是否在请求中
			mode: "", // add update
			addressPopup: { show: false, value: "" }
		}
	},
	onLoad(options) {
		this.options = options
		this.init(options)
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop
	},
	onReady() {
		let that = this
		that.originalForm = vk.pubfn.copyObject(that.form1)
		that.$refs.form1.setRules(that.rules)
	},
	methods: {
		// 页面数据初始化函数
		init(options) {
			let that = this
			that.mode = options._id ? "update" : "add"
			uni.setNavigationBarTitle({
				title: that.mode == "update" ? `修改${that.title}` : `新增${that.title}`
			})
			const eventChannel = that.getOpenerEventChannel() // that 需指向 this
			if (eventChannel.on) {
				// 监听data事件，获取上一页面通过eventChannel.emit传送到当前页面的数据
				eventChannel.on("data", data => {
					that.form1 = vk.pubfn.objectAssign(that.form1, data)
				})
			}
			if (that.mode == "update") {
				// 如果没有通过eventChannel.on获取到数据,则请求云函数获取数据
				setTimeout(() => {
					if (!that.form1._id) {
						vk.callFunction({
							url: that.url.getInfo,
							loading: true,
							data: { _id: options._id },
							success: data => {
								that.form1 = data.info
							}
						})
					}
				}, 100)
			}
		},
		// 表单提交
		submit() {
			let that = this
			let { form1 } = that
			that.$refs.form1.validate(valid => {
				console.log(form1);
				if (!valid) return
				let url = that.mode == "update" ? that.url.update : that.url.add
				vk.callFunction({
					url,
					loading: true,
					data: form1,
					success: function (data) {
						vk.toast(data.msg, 500, function () {
							vk.navigateBack()
						})
					}
				})
			})
		},
		// 表单重置
		resetFields() {
			let that = this
			that.$refs["form1"].resetFields()
			that.form1 = vk.pubfn.copyObject(that.originalForm)
		},
		secondaryBtn() {
			let that = this
			that.addressPopup.show = true
			uni.getClipboardData({
				success({ data }) {
					uni.hideToast()
					let res = that.$refs.address.addressDiscern(data)
					if (res.code == 0) {
						that.addressPopup.value = data
					}
				}
			})
		},
		// 智能识别收货信息
		discernAddress() {
			let that = this
			let text = that.addressPopup.value
			let res = that.$refs.address.addressDiscern(text)
			if (res.code == 0) {
				vk.pubfn.objectAssign(that.form1, res.data)
				that.addressPopup.show = false
			} else {
				vk.toast(res.msg)
			}
			that.$refs.uModal.clearLoading()
		}
	}
}
</script>

<style lang="scss" scoped>
.app {
	--main: #19be6b;
	--secondary: rgba(76, 128, 96, 0.2);
	background-color: var(--bgcolor);
	min-height: calc(100vh - var(--window-top));

	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100rpx;
		align-items: center;
		display: flex;

		>view {
			flex: 1;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.secondary-btn {
			background-color: #ffffff;
		}

		.main-btn {
			background-color: var(--main);
			color: #ffffff;
		}
	}

	::v-deep .u-form-item {
		background-color: #ffffff;
		display: block;
		color: #7e7e7e;
		color: #262626;
		padding: 20rpx;
		margin-bottom: 0rpx;
	}
}
</style>
